<style lang="less">
    @import './home.less';
</style>

<template>
  <div class="sidebar-mini skin-purple fixed" v-bind:class="{'sidebar-collapse' : isCollapse}">
    <div class="wrapper">
      <header class="main-header">
        <!-- Logo -->
        <span class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>V</b>ue</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>VUE</b>Admin</span>
        </span>
        <nav class="navbar navbar-static-top">
          <a href="#" class="sidebar-toggle" role="button" v-on:click="sidebarToggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span class="hidden-xs"><i class="fa fa-user"></i> 肖俊</span>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li>
                        <a href="#" v-on:click="refresh">
                          <i class="fa fa-key"></i> 修改密码
                        </a>
                      </li>
                      <li>
                        <a href="#" v-on:click="logout">
                          <i class="fa fa-sign-out"></i> 注销
                        </a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </nav>
      </header>

      <!-- Left side column. contains the sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <SidebarMenu></SidebarMenu>
        </section>
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Blank page
            <small>it all starts here</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Examples</a></li>
            <li class="active">Blank page</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <router-view></router-view>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import SidebarMenu from './component/SidebarMenu.vue'
import utils from '@/libs/utils'
import {router} from '@/router/index'
export default {
  name: 'Home',
  components: {
    SidebarMenu
  },
  data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    sidebarToggle: function (event) {
      console.log(this.isCollapse)
      this.isCollapse = !this.isCollapse
    },
    refresh: function () {
      utils.get('/api/refresh', null, function (d) {
        utils.msg(d.data)
      })
    },
    logout: function () {
      utils.clearCookie('Authorization')
      router.push('/login')
    }
  }
}
</script>
